<template>
  <div class="dashboard-container">
    <!-- 搜索表单 -->
    <!-- 搜索表单 -->
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="between">
          <el-col :span="22">
            <el-form ref="form" :model="form" label-width="80px" :inline="true">
              <el-form-item>
                <el-input v-model="form.directory_name" placeholder="目录名称" />
              </el-form-item>
              <el-form-item>
                <el-select v-model="form.subject_id" placeholder="归属学科" @click.native="getSubjectfn">
                  <el-option v-for="item in form.thelist" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select v-model="form.is_show" placeholder="显示状态">
                  <el-option label="显示" value="1" />
                  <el-option label="隐藏" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <template>
                  <el-button
                    ref="search"
                    type="primary"
                    size="small"
                    @click="search(form)"
                  >搜索</el-button>
                </template>
                <el-button size="small" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="1">
            <el-button
              id="create"
              type="primary"
              size="medium "
              @click="add()"
            >创建目录</el-button>
          </el-col>
        </el-row>

        <!-- 搜索表单 -->
        <!-- 搜索表单 -->

        <!-- 表格 -->
        <!-- 表格 -->
        <div class="bottom">
          <el-table stripe border :data="list">
            <el-table-column label="序号" type="index" align="center" />
            <el-table-column prop="id" label="目录ID" align="center" />
            <el-table-column
              prop="directory_name"
              label="目录名称"
              align="center"
              width="180"
            />
            <!-- src="http://122.51.249.55:7005/admin/index/upload/image/2021/04/1618146157124.jpg" -->
            <el-table-column prop="" label="目录图标" align="center">
              <template slot-scope="{row}">
                <img
                  v-imageerror="defaultimg"
                  class="size"
                  :src="`http://122.51.249.55:7005/${row.directory_icon}`"
                  alt=""
                >
              </template>
            </el-table-column>

            <el-table-column label="归属学科" prop="subject_name" align="center" />
            <el-table-column label="创建人" prop="username" align="center" />
            <el-table-column label="是否显示" align="center">
              <template slot-scope="{ row }">
                <el-switch
                  v-model="row.is_show"
                  :active-value="1"
                  :inactive-value="2"
                  active-text="是"
                  inactive-text="否"
                  @change="switchfn(row.id,row.is_show)"
                />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="tag_num"
              label="标签数量"
            /><el-table-column label="操作" width="180" align="center">
              <template slot-scope="{ row }">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  size="mini"
                  @click="edit(row.id)"
                />
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  @click="del(row.id)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 表格 -->
        <!-- 表格 -->
        <!-- 分页器 -->
        <!-- 分页器 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            background
            :current-page="page.page"
            :page-size="page.size"
            :total="page.total"
            :page-sizes="[10, 20, 30]"
            layout="prev, pager, next,sizes"
            @current-change="changePage"
            @size-change="changeSize"
          />
        </el-row>
        <!-- 分页器 -->
        <!-- 分页器 -->
      </el-card></div>

    <!-- 弹出框 -->
    <!-- 弹出框 -->
    <div class="dialog">
      <el-dialog
        v-if="subjectdialog"
        :title="dialogform.id ? '修改目录' : '添加目录'"
        :visible="subjectdialog"
        @close="dialogcnacel"
      >
        <el-form ref="form" :model="dialogform" label-width="50px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="归属学科" label-width="30%">
                <el-select v-model="dialogform.subject_id" placeholder="请选择">
                  <el-option v-for="item in form.thelist" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目录名称" label-width="30%">
                <el-input
                  v-model="dialogform.directory_name"
                  placeholder="请输入目录名称"
                  style="width: 200px"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="排序" label-width="30%">
                <!-- <el-button type="primary" @click="dialogform.sort--">-</el-button>
                <el-input v-model="dialogform.sort" style="width: 80px" />
                <el-button type="primary" @click="dialogform.sort++">+</el-button> -->
                <template>
                  <el-input-number v-model="dialogform.sort" :min="1" label="描述文字" />
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否显示" label-width="30%">
                <el-switch
                  v-model="dialogform.is_show"
                  :active-value="1"
                  :inactive-value="2"
                  active-text="是"
                  inactive-text="否"
                />
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="目录图标" label-width="30%">
                <el-upload
                  :on-remove="handleRemove"
                  :file-list="fileList"
                  action="http://122.51.249.55:7005/admin/index/upload?mode=single&type=image"
                  name="image"
                  :headers="mytoken"
                  :on-success="onSuccess"
                  list-type="picture-card"
                ><i
                  class="el-icon-plus"
                /></el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item>
            <el-button size="small" @click="dialogcnacel">取消</el-button>
            <el-button
              size="small"
              type="primary"
              @click="dialogOK()"
            >确定</el-button>
          </el-form-item> -->
        </el-form>
        <!-- footer按钮 -->
        <template v-slot:footer>
          <el-row type="flex" justify="end">
            <el-col :span="6">
              <el-button size="medium" @click="dialogcnacel">取消</el-button>
              <el-button
                size="medium"
                type="primary"
                @click="dialogOK()"
              >确定</el-button>
            </el-col>
          </el-row>
        </template>
      </el-dialog>
    </div>
    <!-- 弹出框 -->
    <!-- 弹出框 -->
  </div>
</template>

<script>

import { getSubject, getDirectoryList, getdirectory, deleteDirectory, addDirectory, getSmipleDirectoryList, editDirectory } from '@/api/directory'
import { mapGetters } from 'vuex'
export default {
  name: 'Directory',
  data() {
    return {
      fileList: [],
      defaultimg: require('@/assets/images/default-icon.png'),
      mytoken: { Authorization: null },
      form: {
        directory_name: '',
        subject_id: '',
        is_show: '',
        thelist: '',
        limit: 10,
        page: 1
      },
      dialogform: {
        directory_name: '',
        sort: 10,
        is_show: 1,
        directory_icon: '',
        subject_id: '',
        id: ''
      },
      val: '',
      value: true,
      subjectdialog: false,
      formLabelWidth: 80,
      list: [],
      page: {
        page: 1,
        limit: 10,
        total: 0
      },
      img: ''
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.mytoken.Authorization = this.token
    this.getDirectoryList()
    this.getpush()
    this.getSubjectfn()
  },
  mounted() {
    this.getpush()
  },
  methods: {

    // // 计数器的默认方法
    // handleChange(value) {
    //   console.log(value)
    // },

    // 移除图片
    handleRemove(file, fileList) {
      this.fileList = []
    },
    getpush() {
      this.val = this.$route.query.name
      this.form.subject_id = this.val.id
      setTimeout(() => {
        this.search(this.form)
      }, 0)
    },
    add() {
      this.subjectdialog = true
      this.getSubjectfn()
    },
    dialogcnacel() {
      this.dialogform = {
        directory_name: '',
        sort: 10,
        is_show: 1,
        directory_icon: '',
        subject_id: '',
        id: ''
      }
      this.subjectdialog = false
      this.handleRemove()
    },
    // 获取单个进行数据回显
    async edit(id) {
      this.subjectdialog = true
      const res = await getSmipleDirectoryList(id)
      this.dialogform.directory_name = res.data.directory_name
      this.dialogform.sort = res.data.sort
      this.dialogform.is_show = res.data.is_show
      this.dialogform.directory_icon = `http://122.51.249.55:7005/${res.data.directory_icon}`
      this.dialogform.subject_id = res.data.subject_id
      this.dialogform.id = res.data.id
      this.fileList = [{ name: '22', url: '' }]
      this.fileList[0].url = `http://122.51.249.55:7005/${res.data.directory_icon}`
    },
    // 弹框确认事件
    async dialogOK() {
      if (!this.dialogform.id) {
        console.log('添加')
        console.log()
        await addDirectory(this.dialogform)
      } else {
      // 假如没有值的话，就是添加
        console.log('修改')
        // console.log(val)
        await editDirectory(this.dialogform)
      }
      this.getDirectoryList()
      this.$message.success('操作成功')
      this.dialogcnacel()
    // 编辑功能是先获取，再修改，所以先获取id 用 get ；之后使用put
    },
    // 图片上传回调
    onSuccess(response, file, fileList) {
      // console.log(response)
      this.dialogform.directory_icon = response.data.url
    },
    // 获取下拉列表
    async getSubjectfn() {
      const res = await getSubject()
      console.log(res)
      this.form.thelist = res.data
    },
    // 换页
    changePage(newPage) {
      this.page.page = newPage
      this.getDirectoryList()
    },
    // 改每页的容量
    changeSize(newPage) {
      this.page.limit = newPage
      this.getDirectoryList()
    },
    // 获取目录列表
    async getDirectoryList() {
      const res = await getDirectoryList(this.page)
      // console.log(res)
      this.list = res.data.list
      this.page.total = res.data.total
    },
    // 查询
    async search(val) {
      console.log(8888)
      const res = await getdirectory(val)
      console.log(res)
      this.list = res.data.list
      this.page.total = res.data.total
    },
    // 重置按钮
    reset() {
      this.form = {
        directory_name: '',
        subject_id: '',
        is_show: '',
        thelist: '',
        limit: 10,
        page: 1
      }
      this.getDirectoryList()
    },
    // 删除功能
    async del(id) {
      this.fileList = null
      await this.$confirm('您确定删除吗')
      await deleteDirectory(id)
      if (this.list.length === 1 && this.page.page !== 1) {
        this.page.page--
      }
      this.$message.success('删除成功')
      this.getDirectoryList()
    }

  }}
</script>

<style scoped>

.create {
  float: right;
  margin-left: 50px !important;
}
.size{
  width: 80px;
  height: 80px;
}
</style>
